<template>
	<view class="container">
		<view class="content">
			<view class="title">接龙收入统计</view>
			<view class="content-detail" style="border-bottom: 1px solid rgba(18,17,42,0.07);">
				<view class="child-menu">
					<view class="child-title">有效收入总额</view>
					<view class="second mar-t-20">￥{{statics.total_price?statics.total_price:'0.00'}}</view>
				</view>
				<view class="child-menu">
					<view class="child-title">未核销</view>
					<view class="second mar-t-20">￥{{statics.no_verify_price?statics.no_verify_price:'0.00'}}</view>
				</view>
			</view>
			<view class="content-detail">
				<view class="child-menu">
					<view class="child-title">已核销</view>
					<view class="second mar-t-20">￥{{statics.verify_price?statics.verify_price:'0.00'}}</view>
				</view>
				<view class="child-menu">
					<view class="child-title">已取消</view>
					<view class="second mar-t-20">￥{{statics.cancel_price?statics.cancel_price:'0.00'}}</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="title">接龙情况统计</view>
			<view class="content-detail" style="border-bottom: 1px solid rgba(18,17,42,0.07);">
				<view class="child-menu">
					<view class="child-title">有效订单总数</view>
					<view class="second mar-t-20">{{statics.total_order?statics.total_order:0}}</view>
				</view>
				<view class="child-menu">
					<view class="child-title">接龙总件数</view>
					<view class="second mar-t-20">{{statics.total_num?statics.total_num:0}}</view>
				</view>
			</view>
			<view class="content-detail">
				<view class="child-menu">
					<view class="child-title">接龙的人</view>
					<view class="second mar-t-20">{{statics.total_person?statics.total_person:0}}</view>
				</view>
				<view class="child-menu">
					<view class="child-title">来过的人</view>
					<view class="second mar-t-20">{{statics.browse?statics.browse:0}}</view>
				</view>
			</view>
		</view>
		<view class="content" v-if="goods_data&&goods_data.length>0">
			<view class="title">商品接龙统计</view>
			<view class="goods"  v-for="(item,index) in goods_data" :key="index" :style="{borderBottom: index%2==0?'1px solid rgba(18,17,42,0.07)':''}">
				<view>
					<view class="goods-title">{{item.goods_info.title}}</view>
					<view class="goods-detail mar-t-20">件数：{{item.num}}丨商品总价：{{item.price}}</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex';
	import Api from '@/common/api';
	export default{
		components: {
		},
		data(){
			return {
				dragon_id:0,
				statics:{},
				goods_data:[]
			}
		},
		onLoad(){
		},
		onShow(){
			let option=this.$api.currentPageOption();
			this.dragon_id=option.id;
			this.loadStatics();
		},
		onReachBottom(){
		},
		methods: {
			...mapMutations(['login']),
			async loadStatics(){
				let data = await Api.apiCall('get',Api.apiName.single_dragon_statics,{dragon_id:this.dragon_id});
				if(!data){
					return;
				}
				this.statics=data.data.statics;
				this.goods_data =data.data.goodsList;
			},
			
		},

	}
</script>

<style lang='scss'>
	page{
		background: #F5F5F5;
	}
	/* .container{
		display: flex;
		flex-direction: column;
		height: 100vh;
	} */
	.content{
		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
	}
	.content-detail{
		display: flex;
		margin: 0rpx 20rpx;
	}
	.title{
		font-weight: 800;
		font-size: 36rpx;
		color: #000000;
		padding: 20rpx 0rpx;
		border-bottom: 1px solid rgba(18,17,42,0.07);
		margin: 20rpx;
	}
	.child-menu{
		margin: 20rpx;
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.child-title{
		color: #999999;
		font-size: 32rpx;
	}
	.mar-t-20{
		margin-top: 20rpx;
	}
	.second{
		font-size: 36rpx;
	}
	.goods{
		margin:20rpx;
		padding: 20rpx 0rpx;
	}
	.goods-title{
		color: #000000;
		font-weight: 800;
		font-size: 32rpx;
	}
	.goods-detail{
		color:#999999;
		font-size: 32rpx;
	}
</style>
